<template>
	<view v-if="pageShow">
		<view class="topbgc">
			<view class="flexbetween " style="padding: 80rpx 30rpx 30rpx;">
				<u-icon name="arrow-left" color="#333" size="24" @click="backpage"></u-icon>
				<view class="titletext hei_text bold">添加车辆</view>
				<view class="" style="width: 10rpx;"></view>
			</view>
		</view>
		<view class="mainpadding ffffff topbox">
			<view class="">
				<view class="titletext fonweight xiaohei">车牌号码</view>
				<view class="input margin_top">
					<input placeholder="请输入车牌号码" type="text" v-model="carno"/>
				</view>
			</view>
			<view class="margin_top" @click="xhshow=true">
				<view class="titletext fonweight xiaohei">车辆品牌-类型</view>
				<view class="input margin_top flexbetween">
					<input placeholder="请选择车辆品牌" type="text" disabled="" v-model="user_car_type_text"/>
					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
				</view>
			</view>
			<view class="margin_top" @click="show=true">
				<view class="titletext fonweight xiaohei">车辆属性</view>
				<view class="input margin_top flexbetween">
					<input placeholder="请选择车辆属性" type="text" disabled v-model="car_attr_text"/>
					<u-icon name="arrow-right" color="#999" size="20"></u-icon>
				</view>
			</view>
			<view class="margin_top">
				<view class="titletext fonweight xiaohei">车辆颜色</view>
				<view class="input margin_top">
					<input placeholder="请输入车辆颜色" type="text" v-model="car_color"/>
				</view>
			</view>
		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" @click="submit()">保存</view>
		</view>
		<view class="" v-if="sxShow">
			<u-picker :show="xhshow" ref="uPicker" title="选择品牌-车型" keyName="name" :columns="columns" @confirm="confirm" @cancel="cancel"
				@change="changeHandler"></u-picker>
		</view>
		<view class=""  v-if="sxShow">
			<u-picker :show="show"  title="选择车辆属性" keyName="name" @cancel="show = false" :columns="columnssx" @confirm="confirmsx"></u-picker>
		</view>
		
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pageShow:false,
				columns: [],
				columnData: [],
				xhshow: false,
				sxShow:false,
				user_car_type_id: "",
				user_car_type_text: "",
				user_car_type_pid: "",
				car_attr_id:"",
				car_attr_text:"",
				carno:"",
				car_color:"",
				show:false,
				columnssx:[],
			}
		},
		onLoad() {
			this.getcx()
			this.getDetail()
			this.getsx()
		},
		methods: {
			submit(){
				if(this.carno==""){
					httpRequest.toast("请输入车牌号")
					return false
				}
				if(this.user_car_type_text==""){
					httpRequest.toast("请选择车辆品牌-类型")
					return false
				}
				if(this.car_attr_text==""){
					httpRequest.toast("请选择车辆属性")
					return false
				}
				if(this.car_color==""){
					httpRequest.toast("请输入车辆颜色")
					return false
				}
				httpRequest.request('/api/user/addUserCar', 'GET', {
					user_car_type_pid:this.user_car_type_pid,
					user_car_type_id:this.user_car_type_id,
					carno:this.carno,
					car_color:this.car_color,
					car_attr_id:this.car_attr_id,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						})
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getsx() {
				httpRequest.request('/api/user/carAttrIndex', 'GET', {}, false, false, true).then(res => {
					this.columnssx.push(res.data)
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getDetail(id){	
				httpRequest.request('/api/user/index', 'GET', {}, false, false, true).then(res => {
					let data = res.data.carinfo
					if(data){
						this.user_car_type_id = data.type.id
						this.user_car_type_pid = data.type1.id
						this.user_car_type_text = data.type.name+"-"+data.type1.name
						this.carno = data.carno
						this.car_color = data.car_color
						this.car_attr_id = data.carattr.id
						this.car_attr_text = data.carattr.name
					}
					
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getcx() {
				httpRequest.request('/api/user/userCarTypeIndex', 'GET', {}, false, false, true).then(res => {
					this.columns[0] = res.data
					this.columns[1] = res.data[0].child
					res.data.forEach((item, index) => {
						this.columnData[index] = item.child
					})
					this.sxShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			backpage(){
				uni.navigateBack(1)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.user_car_type_pid = e.value[0].id
				this.user_car_type_id = e.value[1].id
				this.user_car_type_text = e.value[0].name + "-" + e.value[1].name
				this.xhshow = false
			},
			cancel() {
				this.xhshow = false
			},
			confirmsx(e){
				this.car_attr_id = e.value[0].id
				this.car_attr_text = e.value[0].name
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbox{
		position: relative;
		top: -80rpx;
		border-radius: 30rpx;
	}
	page{
		background-color: #fff;
	}
.input{
	padding: 18rpx 30rpx;
	background: #F5F6F8;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.topbgc{
	height: 500rpx;
	width: 100%;
	background-size: 100% 100%;
	background-image: url("../static/images/system/addcar.png");
}
</style>
